<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>骡窝日报详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {




            //得到请求头中的参数,发送ajax,得到数据,渲染
            var params = getParams();
            var id = params.id;
            $.get("/dailies/" + id, function (data) {
                console.log(data);

                $('.newsDetail').renderValues(data);
            })
            var user = window.sessionStorage.getItem("user");
            //回显收藏
            if(user){
                $.get("/dailies/get",{dailyId:id},function (data) {
                    if(data){
                        $("#collectBtn").toggleClass('cc');
                    }


                })
            }
            $("#collectBtn").click(function () {
                $.post('/dailies/collect',{dailyId:id},function (data) {


                    if(!data.success){
                        $(document).dialog({
                            type : 'confirm',
                            style: 'IOS',
                            titleText: data.msg,
                            content: '是否马上登陆',
                            buttons: [
                                {
                                    name: '登陆',
                                    callback: function() {
                                        window.parent.location.href="/login.html";
                                    }
                                }, {
                                    name: '返回',
                                    callback: function() {
                                        $("#collectBtn").toggleClass('cc');
                                    }
                                }
                            ]
                        });

                    }



                })


            })



        })
        $(function () {
            $(".like").click(function () {
                $(this).toggleClass('cs');
            })

        })
        $(function () {

            $(".collect").click(function () {
                $(this).toggleClass('cc');
            })

        })
        $(function () {
            $(".commentBtn").click(function () {
                $(this).toggleClass('cn');
            })

        })
    </script>
    <style>
        .like{ font-size:20px;  color:#ccc; cursor:pointer;}
        .cs{color:#f00;}
        .collect{ font-size:20px;  color:#ccc; cursor:pointer;}
        .cc{color: gold;}
        .commentBtn { font-size:20px;  color:#ccc; cursor:pointer;}
        .cn{color: green;}
    </style>


</head>

<body>

<div class="newsDetail">
    <div>
        <a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
            <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
        </a>
        <img render-src="coverUrl">

        <div class="container">
            <div class="row">
                <div class="col-4 typeRow">
                    <span class="type" render-html="title"></span>
                </div>
                <div class="col-2">
                </div>

                <div class="col-2">
                    <span>By</span>
                </div>
                <div class="col-4">
                    <span class="type" >叩丁狼</span>
                </div>
            </div>
            <div class="detail">
                <h2 class="title" render-html="subTitle"></h2>
                <div class="content" render-html="content.content"></div>
            </div>

        </div>
        <div class="container d-flex">
            <div class="p-2  flex-fill">
                <!-- <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>-->
                <p class="like" id="likeBtn">&#10084;</p>
            </div>

            <div class="p-2 commentBtn flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
            </div>
            <div class="p-2  flex-fill">
                <i class="fa collect fa-star" id="collectBtn"> </i>
            </div>
        </div>
    </div>
</div>

</body>

</html>